<!-- 
  仓库子模块加不加命名空间的区别：
    1. 没加
      1. 子模块的 state 数据会以模块名拆分到 $store.state 上面
        {
          cart: {},
          user: {},
          abcd: {}
        }
      2. 子模块的 getters 数据会直接追击到 $store.getters 上面
        {
          total: '',
          username: ''
        }
      3. 所有子模块的突变可以重名，提交该名字的突变时，多个模块都会被触发
      4. 所有子模块的动作可以重名，派发该名字的动作时，多个模块都会被触发
        


    2. 加了（推荐）
      1. 子模块的 state 数据会以模块名拆分到 $store.state 上面
        {
          cart: {},
          user: {},
          abcd: {}
        }
      2. 子模块的 getters 数据会直接追加到 $store.getters 上面，但是 key 会加上模块名作为前缀
        {
          'user/total': '100',
          'user/username': '',
          'cart/total': 20
        }
      3. 所有子模块的突变可以重名，提交该名字的突变时，需要添加模块名的前缀
      
  
  加了命名空间辅助函数的变化
        1. mapState(模块名, [])
        2. mapGetters(模块名, [])
        3. mapMutations(模块名, [])
        4. mapActions(模块名, [])

  Vuex的数据不是持久化的，只是根普通数据一样都是内存数据，页面刷新会重新初始化，那么如何做到持久化
        1. 手动方案： 数据变化时自己存一下，初始化时从本地存储中尝试获取
        2. 插件方案： 使用第三方写好的插件。vuex-persist vuex-persistedstate (自行了解一下)
 -->

<template>
  <div>
    <h1>App</h1>
    <p>userInfo: {{ userInfo }}</p>
    <p>raw: {{ raw }}</p>
    <button @click="$store.dispatch('user/login')">登录</button>
    <hr />

    <button @click="$store.commit('abcd')">点我，提交 abcd 的突变</button>
    <button @click="$store.dispatch('abcda')">点我，派发 abcda 的动作</button>

    <button @click="$store.commit('user/abcd')">
      点我，提交 user 下的 abcd 突变
    </button>
    <button @click="$store.commit('cart/abcd')">
      点我，提交 cart 下的 abcd 突变
    </button>

    <button @click="$store.dispatch('user/abcda')">
      点我，派发 user 下的 abcda 动作
    </button>
    <button @click="$store.dispatch('cart/abcda')">
      点我，派发 cart 下的 abcda 动作
    </button>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState("user", ["userInfo"]),
    ...mapState("cart", ["raw"]),
  },
  created() {
    console.log("state", this.$store.state);
    console.log("getters", this.$store.getters);
  },
};
</script>
